// vertical 布局
.vertical-container {
  .sidebar {
    width: 210px;
  }
  .sidebar-collapse {
    width: 64px;
  }
  .sidebar,
  .sidebar-collapse {
    height: 100vh;
    transition: all 0.3s;
  }

  .layout-header {
    height: 86px;
    color: #000;

    .el-row {
      margin: 0 !important;

      .el-col {
        padding: 0 !important;
      }
    }
    .row-1 {
      height: 48px;
    }
  }
}

// horizontal 布局
.horizontal-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .horizontal-header {
    height: 86px !important;

    .row-1 {
      background-color: $blue;
      .el-col {
        height: 48px;
      }
      :deep(.el-menu--horizontal) {
        height: 48px;
        .el-menu-item {
          height: 48px !important;
          padding: 0 20px;
          overflow: hidden;
        }
        .el-sub-menu {
          height: 48px !important;
          overflow: hidden;
        }
      }
    }
  }
}

/**
 * 以下为公共样式
 */
.main-container {
  background-color: $bgc;
  padding: 24px;
  max-height: calc(100vh - 86px);
  overflow-x: hidden;
  overflow-y: scroll;

  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    cursor: pointer;
    border-radius: 4px;
  }
  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }
  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}

.row-2 {
  height: 38px;
  box-shadow: 0 0 1px #888;
}

.container {
  min-height: 100%;
  padding: 18px 22px;
  // overflow: auto;
  background-color: #fff;
  box-shadow: var(--el-box-shadow-light);
}
// 路由切换动画
.router_animate-enter-active {
  animation: fadeInLeft 0.5s;
}
.router_animate-leave-active {
  animation: fadeOutLeft 0.2s;
}
